<template>
  <div class="page">
    <u-navbar title="订单详情">
      <div class="log" slot="right" @click="logs()">
        日志
      </div>
    </u-navbar>
    <!-- 交易状况 -->
    <div class="box order-status">
      {{orderData.orderStatusValue}}
    </div>
    <!-- 物流 -->
    <div class="box order-logistics">
      <!-- 物流 -->
      <div class="traces">
        <div v-if="traceData"></div>
        <div v-else>
          暂无物流信息
        </div>
      </div>
      <!-- 地址 -->
      <div class="address">
        <div class="flex address-person">
          <div class="address-user"> 收货人: {{ order.consigneeName }}</div>
          <div class="address-mobile">
            {{order.consigneeMobile}}
          </div>
        </div>
        <div class="address-detail">{{order.consigneeAddressPath}}{{order.consigneeDetail}}</div>
      </div>
      <!-- 修改收货地址 -->
      <div class="update-address flex" v-if="allowOperation.editConsignee" @click="updateAddress">
        <div>修改收货地址</div>
        <u-icon name="arrow-right"></u-icon>
      </div>
      <!-- 发货 -->
      <div class="ship flex" v-if="allowOperation.ship" @click="ship">
        <div>去发货</div>
        <u-icon name="arrow-right"></u-icon>
      </div>
      <!-- 调整价格 -->
      <div class="editPrice flex" v-if="allowOperation.editPrice" @click="editPrice">
        <div>调整价格</div>
        <u-icon name="arrow-right"></u-icon>
      </div>
      <!-- 订单核销 -->
      <div class="take flex"  v-if="allowOperation.take" @click="take">
        <div>订单核销</div>
        <u-icon name="arrow-right"></u-icon>
      </div>
    </div>
    <!-- 商品 -->
    <div class="box goods">

      <div class="goods-item flex" v-for="(item,index) in orderItems" :key="index">
        <div>
          <u-image width="200" height="200" :src="item.image"></u-image>
        </div>
        <div class="goods-name">
          <div class="wes-2">{{item.goodsName}}</div>
          <div style="margin:5rpx 0"> <span v-for="(item, key) in JSON.parse(item.specs)" :key="key">
              <span v-show="key!='images'" style="font-size: 12px;color: #999999; ">
                {{key}} : {{item}}
              </span>
            </span></div>
          <div class="goods-price">￥{{item.goodsPrice | unitPrice}}</div>
        </div>
      </div>
      <div class="goods-total">
        <div class="flex">
          <div>商品总额：</div>
          <div>￥{{order.goodsPrice | unitPrice}}</div>
        </div>
        <div class="flex">
          <div>PLUS会员优惠：</div>
          <div>{{order.plusDiscountPrice | unitPrice('￥')}}</div>
        </div>
		<div class="flex">
		  <div>优惠卷金额：</div>
		  <div>{{order.priceDetailDTO.couponPrice | unitPrice('￥')}}</div>
		</div>
		<div class="flex" v-if="order.payPoint != 0">
		  <div>积分抵扣金额：</div>
		  <div>{{order.pointDiscountPrice  | unitPrice('￥') }}</div>
		</div>
        <div class="flex">
          <div>运费：</div>
          <div>￥{{order.freightPrice | unitPrice}}</div>
        </div>
        <div class="flex">
          <div>应付金额：</div>
          <div>¥<span>{{order.flowPrice | unitPrice }}</span></div>
        </div>
      </div>
    </div>

    <!-- 发票 -->
    <div class="box invoice-detail" v-if="order.needReceipt && order.receipt">
      <div class="invoice-detail goods-total">

        <div class="flex">
          <div>发票抬头：</div>
          <div>{{ orderData.receipt.receiptTitle ? orderData.receipt.receiptTitle : '暂无'}}</div>
        </div>
        <div class="flex">
          <div>发票税号：</div>
          <div>{{orderData.receipt.taxpayerId ? orderData.receipt.taxpayerId : '暂无'}}</div>
        </div>
        <div class="flex">
          <div>发票内容：</div>
          <div>{{orderData.receipt.receiptContent ? orderData.receipt.receiptContent : '暂无'}}</div>
        </div>
        <div class="flex">
          <div>发票金额</div>
          <div>{{ orderData.receipt.receiptPrice ? orderData.receipt.receiptPrice : '暂无' | unitPrice('￥')}}</div>
        </div>
      </div>
    </div>
    <!-- 订单 -->
    <div class="box order" >
      <div class="goods-total order-detail">
        <div class="flex" v-if="order.needReceipt == true">
          <div>是否开票：</div>
          <div>{{orderData.receipt ? orderData.receipt.receiptStatus == 0 ? '未开' : '已开':'未开' }}</div>
        </div>
        <div class="flex">
          <div>订单号：</div>
          <div>{{order.sn}}</div>
        </div>
        <div class="flex">
          <div>订单来源：</div>
          <div>{{order.clientType | orderClientType}}</div>
        </div>
        <div class="flex">
          <div>订单状态：</div>
          <div>{{orderData.orderStatusValue}}</div>
        </div>

        <div class="flex">
          <div>下单时间：</div>
          <div>{{order.createTime}}</div>
        </div>
        <div class="flex">
          <div>支付方式：</div>
          <div>{{orderData.paymentMethodValue}}</div>
        </div>
        <div class="flex">
          <div>买家留言：</div>
          <div>{{orderData.remark || '暂无'}}</div>
        </div>
        <div class="flex" v-if="order.orderType != 'VIRTUAL'">
          <div>配送方式：</div>
          <div> {{
              order.deliveryMethodValue
                ? order.deliveryMethodValue
                : "暂无配送方式"
            }}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getOrderDetail, getTraces } from "@/api/order";
export default {
  data() {
    return {
      traceData: "", //物流信息
      order: {
        priceDetailDTO: {},
      }, //订单信息
      orderItems: [], //订单商品
      orderLogs: [], //物流
      orderData: {}, //订单详情
      allowOperation: {}, //订单可做选项
	 
    };
  },
  onLoad(options) {
    this.routerVal = options;
    this.init(options.sn);
  },
  onShow() {
    this.init(this.routerVal.sn);
  },
  methods: {
    // 初始化订单详情
    async init(sn) {
      let res = await getOrderDetail(sn);
      let traces = await getTraces(sn);
      if (res.data.success) {
        this.order = res.data.result.order;
        this.orderItems = res.data.result.orderItems;
        this.orderLogs = res.data.result.orderLogs;
        this.orderData = res.data.result;
		console.log("orderData",this.orderData);
        this.allowOperation = res.data.result.allowOperationVO;
      }
       //   TODO 样式还没写
      this.traceData = traces.data.result;
    },
    // 修改地址
    updateAddress() {
      uni.navigateTo({
        url: `/pages/order/updateAddress?data=${encodeURIComponent(
          JSON.stringify(this.order)
        )}`,
      });
    },
    // 发货
    ship() {
      uni.navigateTo({
        url: `/pages/order/ship?data=${encodeURIComponent(
          JSON.stringify(this.order)
        )}`,
      });
    },
    // 调整价格
    editPrice() {
       uni.navigateTo({
        url: `/pages/order/editPrice?data=${encodeURIComponent(
          JSON.stringify(this.order)
        )}`,
      });
    },
    // 订单核销
    take() {
       uni.navigateTo({
        url: `/pages/order/take?data=${encodeURIComponent(
          JSON.stringify(this.order)
        )}`,
      });
    },
    // 查看订单日志
    logs() {
      uni.navigateTo({
        url: `/pages/order/logs?data=${encodeURIComponent(
          JSON.stringify(this.orderLogs)
        )}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  overflow: hidden;
  background: #fff;
  margin-bottom: 20rpx;
  padding: 0 32rpx;
}
.traces {
  font-weight: bold;
  font-size: 30rpx;
}
.order-status {
  background: #252635;
  color: #fff;
  display: flex;
  align-items: center;
  height: 200rpx;
  font-size: 40rpx;
}
.goods-item {
  padding: 32rpx 0;
}
.goods-price {
  text-align: right;
}
.goods-name {
  flex: 2;
  margin-left: 20rpx;
}
.goods-total {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;

  > .flex {
    justify-content: space-between;
    margin: 10rpx 0;
    line-height: 1.75;

    > div:nth-of-type(1) {
      font-size: 24rpx;
      color: #999;
    }
    > div:nth-of-type(2) {
      font-weight: bold;
      > span {
        font-size: 40rpx;
        margin-left: 10rpx;
      }
    }
    > div {
      margin: 0 4rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.order-logistics {
  padding: 32rpx;
}
.address {
  padding: 45rpx 0;
  border-bottom: 1rpx solid #f6f6f6;
}
.update-address,
.ship,
.editPrice,.take {
  justify-content: space-between;
  padding: 44rpx 0;
  border-radius: 20rpx;
  font-size: 30rpx;
  font-weight: bold;
}

.address-person {
  font-size: 30rpx;
  font-weight: bold;
  margin: 20rpx 0 20rpx 0;
  justify-content: space-between;
}
.address-detail {
  font-size: 24rpx;
  color: #999;
}
.order-detail,
.invoice-detail {
  color: #999 !important;
  padding-bottom: 10rpx;
  /deep/ div {
    font-weight: normal !important;
    font-size: 24rpx;
  }
}
.order {
  padding-bottom: 100rpx;
}
.log {
  margin-right: 32rpx;
  font-size: 30rpx;
}
</style>